<template>
  <div class="im_material">
    <div class="material_tabs">
      <div :class="{ im_active: sucai == 1 }" @click="sel_material(1)">
        常用语
      </div>
      <div :class="{ im_active: sucai == 2 }" @click="sel_material(2)">
        常用链接
      </div>
      <div :class="{ im_active: sucai == 3 }" @click="sel_material(3)">
        常用图片
      </div>

    </div>
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <div class="material_body" v-if="sucai == 1">
        <!--内容...-->
        <div class="material_item1" v-for="(item, i) in content" :key="i">
          <p @click="send_text($event, item)">
            {{ item.content }}
          </p>
        </div>
      </div>
      <div class="material_body" v-if="sucai == 2">
        <div class="material_item1" v-for="(item, i) in content" :key="i">
          <p @click="send_text($event, item)">
            {{ item.content }}
          </p>
        </div>
      </div>
      <div class="material_body2" v-if="sucai == 3">
        <div class="material_item3" v-for="(item, i) in content" :key="i">
          <img @click="cpimgOk(item.content)" :src="$fnc.getImgUrl(item.content)" alt="" />
        </div>
      </div>
    </mescroll-vue>
  </div>
</template>

<script>
import MescrollVue from "mescroll.js/mescroll.vue"; //下拉组件
import { mapGetters, mapState } from 'vuex'
export default {
  components: {
    MescrollVue,
  },
  data () {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        mustToTop: true,
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
        toTop: {
          //回到顶部按钮
          src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
          offset: 1000, //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~", //提示
        },
      },
      content: [],
      sucai: 1,
    };
  },
  computed: {
    ...mapGetters(['toAccount', 'currentConversationType']),

  },
  beforeRouteEnter (to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next((vm) => {
      // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
      // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    });
  },
  beforeRouteLeave (to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  },
  methods: {
    sel_material (sucai) {
      //选择素材
      this.sucai = sucai;
      this.content = []; // 在这里手动置空列表,可显示加载中的请求进度
      this.mescroll.resetUpScroll(); // 刷新列表数据
    },
    send_text (e, item) {
      // console.log("kkk", item);
      this.text = item.content;
      this.$emit("selectText", this.text);
    },


    cpimgOk (piclink) {
      const message = this.tim.createCustomMessage({
        to: this.toAccount,
        conversationType: this.currentConversationType,
        payload: {
          data: "piclinkmes",
          description: piclink,
          extension: ""
        }
      });
      this.tim.sendMessage(message).then((success) => {
        this.$store.commit("pushCurrentMessageList", message);
      }).catch((imError) => this.$message.error(imError.message));

    },
    mescrollInit (mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    upCallback (page, mescroll) {
      this.$api.getim
        .material_find({ page: page.num, types: this.sucai })
        .then((res) => {
          if (res.data.code == 200) {
            let arr = res.data.result.data;
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.content = [];
            // 下拉刷新
            // 把请求到的数据添加到列表
            this.content = this.content.concat(arr);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length);
            });
          } else {
            mescroll.endErr();
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.im_material {
  width: 100%;
  height: 100%;
  background: #ffffff;
  margin: 0 4px;
  word-break: break-all;
  overflow: hidden;
  > .material_tabs {
    height: 60px;
    background: #f9fafb;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    padding-left: 15px;
    > div {
      height: 50px;
      width: 120px;
      z-index: 14;
      position: relative;
      display: inline-block;
      padding-top: 20px;
      cursor: pointer;
      margin: 0 -4px;
    }
    > div::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background: #f9fafb;
      border: 1px solid #eef0f5;
      border-bottom: none;
      border-radius: 0.5em 0.5em 0 0;
      transform: perspective(1.5em) rotateX(5deg);
      transform-origin: bottom;
    }
    .im_active::before {
      background: #fff;
    }
  }
  .material_body {
    width: 100%;
    /*height: calc(100vh - 230px);*/
    overflow-y: auto;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
    cursor: pointer;
    > .material_item1 {
      border-radius: 10px;
      border: 1px solid #cccccc;
      width: 95%;
      margin: 5px auto;
      p {
        padding: 0 10px;
        text-align: left;
        color: #000;
        line-height: 25px;
      }
    }
  }
  .material_body2 {
    width: 95%;
    overflow-y: auto;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
    > .material_item3 {
      width: 40%;
      margin: 5px 0;
      img {
        width: 100%;
      }
    }
  }
}
</style>